<template>
  <div class="Pie" ref="PieRef">PieChart</div>
</template>

<script lang="ts">
export default {
  name: "PieChart",
};
</script>

<script lang="ts" setup>
import { left } from "@popperjs/core";
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
const PieRef = ref();
onMounted(() => {
  const myEcharts = echarts.init(PieRef.value);
  const data = [
    {
      name: "粉面粥店",
      value: 56,
    },
    {
      name: "简餐便当",
      value: 33,
    },
    {
      name: "汉堡披萨",
      value: 44,
    },
    {
      name: "香锅冒菜",
      value: 66,
    },
    {
      name: "小吃炸串",
      value: 50,
    },
    {
      name: "地方菜系",
      value: 11,
    },
    {
      name: "轻食简餐",
      value: 46,
    },
  ]
  const total=data.reduce((p,c)=>{return p+c.value},0)
  const option = {
    title:[
    {  text: "品类分布"},
    {  text: "累计订单量",
      subtext:406,
      left:"center",
      top: "middle",
      textStyle:{
        color:"gray",
        fontSize:14,
      },
      subtextStyle:{
        fontSize:25,
        color: "#000",
      }
  },
  ],
      series: {
        type: "pie",
        data,
        radius: ["40%", "70%"],
      },
      tooltip: {
        formatter(parmas:any){
          return `品类分布 <br/>
          ${parmas.marker}${parmas.name}<br/>
          ${parmas.marker}数量:${parmas.value}<br/>
          ${parmas.marker}占比:${parmas.percent}<br/>
        `
        },
      
      },
      legend: {
        right:20,
        top: "middle",
        orient:"vertical",//垂直排列
       formatter(name:string){
        // console.log(name)
        const item=data.find((item)=>item.name===name)as {
          name: string;
         value: number;
        }
      const percent=((item.value/total)*100).toFixed(2)
        return `${name}|${percent}%`
      }

      },
    }
  

    myEcharts.setOption(option);
});
</script>

<style scoped>
.Pie {
  height: 300px;
  width: 100%;
}
</style>
